import {Avatar, Tooltip, Dropdown, Menu, Modal, Form, Input, message} from "antd";
import {UserOutlined} from "@ant-design/icons";
import emitter from "../../utils/header/eventBus";
import {Component, createRef} from 'react';
import logo from "../../assets/header/img/dlut.jpg"
import {Row, Col} from 'antd';
import "../../assets/header/style/userHeader.css";
// 导航栏用户头像
export default class userAvatar extends Component {
    // 用户数据需从接口经父组件导入过来
    constructor(props) {

        super(props);
        this.state = {
            showPasswordModal: false,
        }
    }

    formRef = createRef();

    menu = <Menu>
        <Tooltip title={this.props.name}>
            <Menu.Item key="userName">用户名：{this.props.name}</Menu.Item>
        </Tooltip>
        <Tooltip title={this.props.slogan}>
            <Menu.Item key="name">个性签名：{this.props.slogan}</Menu.Item>
        </Tooltip>
        <Menu.Item key="userInfo" onClick={() => emitter.emit("handleUserInfo")}>
            个人信息维护
        </Menu.Item>
        <Menu.Item
            key="passwordManage"
            onClick={() =>
                Modal.info({
                    title: "修改用户密码",
                    closable: true,
                    content: (
                        <Form labelCol={{span: 8}} wrapperCol={{span: 16}} ref={this.formRef} name="control-hooks">
                            <Form.Item
                                name="password"
                                label="原密码"
                                rules={[
                                    {
                                        required: true,
                                        message: "请输入原密码",
                                    },
                                ]}
                            >
                                <Input/>
                            </Form.Item>
                            <Form.Item
                                name="newPasspassword"
                                label="新密码"
                                rules={[
                                    {
                                        required: true,
                                        message: "请输入新密码",
                                    },
                                ]}
                            >
                                <Input/>
                            </Form.Item>
                            <Form.Item
                                name="repeatNewPasspassword"
                                label="重复新密码"
                                rules={[
                                    {
                                        required: true,
                                        message: "请输入新密码",
                                    },
                                ]}
                            >
                                <Input/>
                            </Form.Item>
                        </Form>
                    ),
                    onOk: () =>
                        this.formRef.current.validateFields().then(
                            ({newPasspassword, repeatNewPasspassword}) => {
                                if (newPasspassword === repeatNewPasspassword) {
                                    return true;
                                } else {
                                    message.error("两次输入的新密码不一致，请重新输入");
                                    return Promise.reject();
                                }
                            }),
                })}
        >
            修改密码
        </Menu.Item>
        <Menu.Item key="loginOut" onClick={() => emitter.emit("loginOut")}>
            退出登录
        </Menu.Item>
    </Menu>;


    render() {
        const {name, imgUrl, slogan} = this.props;
        return (
            <Row>
                <Col span={5}>
                    <a href="">
                        <img src={logo} style={{
                            width: 200,
                            height: 60,
                        }}/>
                    </a>
                </Col>
                <Col span={6} push={2}>欢迎进入大工网盘</Col>
                <Col span={6} push={5}>
                    <div>{slogan}</div>
                </Col>
                <Col span={6} push={5}>
                    <Tooltip title={name} placement="right">
                        <Dropdown overlay={this.menu} trigger={["click"]}>
                            {imgUrl ? <Avatar src={imgUrl}/> : <Avatar icon={<UserOutlined/>}/>}
                        </Dropdown>
                    </Tooltip>
                </Col>
                <Col span={1}>
                    <div>{name}</div>
                </Col>
            </Row>

        );
    }
}
